<template>
  <div>
    <div id="isTop" style="width: 5px;height: 5px;"></div>
    <div id="to-top-btn">
      <div @click="goTo()" class="dvStyleS">
        <i
          class="iconfont icon-0-46"
          style="color: #192220;font-size: 50px; position:fixed; right:20px; bottom:20px;"
        >
          <div class="hddb">回到顶部</div>
        </i>
      </div>
    </div>
    <section id="goodsdetails" style="margin-top: 120px; ">
      <div
        class="shopping_info container"
        v-for="item in detailslist"
        v-show="item.goods_name != null"
      >
        <div class="photo">
          <div class="small_photo">
            <img
              :src="
                item.goods_small_logo
                  ? item.goods_small_logo
                  : 'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'
              "
            />
          </div>
          <div class="big_photo">
            <img
              :src="
                item.goods_big_logo
                  ? item.goods_big_logo
                  : 'https://th.bing.com/th/id/Rba514750b17ba93e3246dddc1701fb32?rik=PI%2b5poMwtaPpVg&riu=http%3a%2f%2fwww.sucaijishi.com%2fuploadfile%2f2020%2f0110%2f20200110051242482.png&ehk=0%2flB0BGtq0UTwL3A%2bfvgrCZx5fElQZlFAS2%2b4qaQkTk%3d&risl=&pid=ImgRaw'
              "
            />
          </div>
        </div>
        <div class="shopping_bannar">
          <div class="shopping_title">
            <h4>{{ item.goods_name }}</h4>
            <span
              >￥<b>{{ item.goods_price }}</b></span
            >
          </div>
          <div class="shopping_num">
            <span class="huodong">促销活动</span>
            <div id="sales_info">
              <div class="newpp">
                <span>新人礼</span>
                <h4>领新人大礼包，首单优惠购最低只要￥9.9</h4>
              </div>
              <div class="downsales">
                <span>直降</span>
                <h4>喜迎2021</h4>
              </div>
              <div class="free_lx">
                <span>优鲜赔</span>
                <h4>100分钟内审核</h4>
                <h5>让您售后无忧</h5>
              </div>
            </div>
          </div>
          <div class="shop_button">
            <input
              type="button"
              class="intoshopcart"
              value="加入购物车"
              @click="inshopcart(item)"
            />
            <input
              type="button"
              class="nowshop"
              value="现在购买"
              @click="islogin1(item)"
            />
          </div>
        </div>
      </div>
      <!-- <div class="container">
        <h2 style="margin-top: 20px;">商品信息</h2>
        <img
          :src="shopping_introduce"
          style="width: 100%; margin-top: 10px;border-radius: 10px;"
        />
      </div> -->
    </section>
  </div>
</template>

<script>
export default {
  data() {
    return {
      detailslist: [],
      status,
      goods_id: this.$route.query.goods_id,
      shopping_introduce: "",
      orderDetail: {
        item_id: 0,
        order_code: "",
        item_num: 0,
        item_title: "",
        item_price: 0,
        total: 0,
        item_image: "",
      },
      orders: {
        order_code: "",
        payment_money: 0,
        status: 2,
      },
      menberID: "",
      token: "",
    };
  },
  methods: {
    goTo() {
      isTop.scrollIntoView({
        behavior: "smooth",
      });
    },
    // 返回顶部等等
    scrollToTop() {
      let topBtn = document.getElementById("to-top-btn");
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      let browserHeight = 200;
      if (scrollTop > browserHeight) {
        topBtn.style.display = "block";
      } else {
        topBtn.style.display = "none";
      }
    },
    intocart(val) {
      this.$axios
        .get("http://localhost:8080/mall/goods/addCart", {
          params: {
            goods_id: val.goods_id,
            goods_name: val.goods_name,
            num: 1,
            goods_price: val.goods_price,
            goods_small_logo: val.goods_small_logo,
          },
        })
        .then((ret) => {
          if (ret.status == 200) {
            this.$message("成功加入购物车!");
          }
        });
    },
    inshopcart: function(val) {
      // console.log(val);
      if (this.token != null) {
        this.intocart(val);
      } else {
        this.$message("未登录，请先登录");
        this.$router.push({
          path: "/login",
        });
      }
    },
    islogin1(item) {
      if (this.token != null) {
        this.playcat(item);
      } else {
        this.$message("未登录，请先登录");
        this.$router.push({
          path: "/login",
        });
      }
    },
    playcat: function(item) {
      this.createOrderCode();
      //把购物车数据作为订单详情信息
      this.orderDetail.item_id = item.goods_id;
      this.orderDetail.item_num = 1;
      this.orderDetail.item_title = item.goods_name;
      this.orderDetail.item_price = item.goods_price;
      this.orderDetail.total = item.goods_price;
      this.orderDetail.item_image = item.goods_small_logo;
      // 生成订单详情数据
      const res1 = this.$axios
        .get("http://localhost:8080/mall/orders/createOrderDetail", {
          params: {
            item_id: this.orderDetail.item_id,
            order_code: this.orderDetail.order_code,
            item_num: this.orderDetail.item_num,
            item_title: this.orderDetail.item_title,
            item_price: this.orderDetail.item_price,
            total: this.orderDetail.total,
            item_image: this.orderDetail.item_image,
          },
        })
        .then(function(ret) {
          if (ret.status == 200) {
            console.log("生成订单详情数据成功");
          }
        });
      //生成订单信息
      this.orders.payment_money = this.orderDetail.total;
      const res2 = this.$axios
        .get("http://localhost:8080/mall/orders/createOrder", {
          params: {
            order_code: this.orders.order_code,
            payment_money: this.orders.payment_money,
            flag: 0,
            member_id: this.menberID,
            status: 0,
          },
        })
        .then(function(ret) {
          if (ret.status == 200) {
            console.log("生成订单信息成功!!");
          }
        });

      let that = this;
      setTimeout(function() {
        that.$router.push({
          path: "/orderfirst",
          query: {
            order_code: that.orders.order_code,
          },
        });
      }, 50);
    },
    createOrderCode() {
      let random_no = "";
      for (
        let i = 0;
        i < 3;
        i++ //j位随机数，用以加在时间戳后面。
      ) {
        random_no += Math.floor(Math.random() * 10);
      }
      random_no = new Date().getTime() + random_no;
      this.orderDetail.order_code = random_no;
      this.orders.order_code = random_no;
    },
  },
  mounted: function() {
    this.$axios
      .get(
        "http://localhost:8080/mall/goods/findGoodsDetail?goods_id=" +
          this.goods_id
      )
      .then(
        function(ret) {
          this.detailslist = ret.data.message;
          let src = this.detailslist.message.goods_introduce;
          this.shopping_introduce = require("../../assets" +
            src.replace("../img", ""));
          //"../../public/images/caomei2.png"
        }.bind(this)
      );
    this.menberID = window.sessionStorage.getItem("id");
    this.token = window.sessionStorage.getItem("token");
    window.addEventListener("scroll", this.scrollToTop);
  },
  destroyed() {
    window.removeEventListener("scroll", this.scrollToTop);
  },
};
</script>

<style lang="less">
body {
  background-color: #ededed;
}

#to-top-btn {
  .hddb {
    display: none;
  }

  i:hover {
    .hddb {
      position: fixed;
      right: 20px;
      bottom: 75px;
      display: block;
      font-size: 18px;
    }
  }
}

#goodsdetails {
  margin-top: 10px;

  .shopping_info {
    padding: 60px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);
    display: flex;

    .photo {
      display: flex;

      .small_photo {
        width: 80px;
        height: 80px;
        margin-top: 10px;
        padding: 12px;
        border: 1px solid #f0f0f0;
        border: 1px solid rgba(0, 0, 0, 0.06);
        border-radius: 5px;
        cursor: pointer;

        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }

      .big_photo {
        margin-left: 20px;

        img {
          display: block;
          width: 440px;
          height: 440px;
        }
      }
    }

    .shopping_bannar {
      margin-left: 10px;

      .shopping_title {
        padding: 18px 8px 18px 10px;
        border-bottom: 1px solid #e5e5e5;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);

        h4 {
          font-size: 24px;
          line-height: 1.25;
          color: #000;
          margin-bottom: 13px;
        }

        span {
          display: block;
          color: #d44d44;
          font-weight: 700;
          font-size: 16px;
          line-height: 20px;
          text-align: right;
        }
      }

      .shopping_num {
        height: 140px;
        padding: 30px 0;
        border-bottom: 1px solid #e5e5e5;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08);

        .huodong {
          float: left;
          padding-right: 20px;
          font-size: 14px;
          color: #8d8d8d;
          line-height: 36px;
        }

        #sales_info {
          float: right;

          .newpp {
            display: flex;
            font-size: 12px;
            line-height: 20px;

            span {
              height: 20px;
              line-height: 20px;
              color: #d44d44;
              background: #fce9e8;
              border-color: #f0bab6;
              font-size: 12px;
              border-radius: 13px;
              padding: 0 8px;
              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
              border: 1px solid #d3d3d3;
            }

            h4 {
              margin-left: 10px;
              height: 20px;
              color: gray;
              font-size: 12px;
              line-height: 20px;
            }
          }

          .downsales {
            display: flex;
            font-size: 12px;
            line-height: 20px;

            span {
              height: 20px;
              line-height: 20px;
              background: #fffbe5;
              border: 1px solid #ffe57a;
              color: #e6b217;
              font-size: 12px;
              border-radius: 13px;
              padding: 0 8px;
              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
              border: 1px solid #d3d3d3;
            }

            h4 {
              margin-left: 10px;
              height: 20px;
              color: gray;
              font-size: 12px;
              line-height: 20px;
            }
          }

          .free_lx {
            display: flex;
            font-size: 12px;
            line-height: 20px;

            span {
              height: 20px;
              line-height: 20px;
              color: #80a436;
              background: #f3fcdf;
              border: 1px solid #bed698;
              font-size: 12px;
              border-radius: 13px;
              padding: 0 8px;
              box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
              border: 1px solid #d3d3d3;
            }

            h4 {
              margin-left: 10px;
              height: 20px;
              color: gray;
              font-size: 12px;
              line-height: 20px;
            }

            h5 {
              margin-left: 10px;
              height: 20px;
              color: #d44d44;
              font-size: 12px;
              line-height: 20px;
            }
          }
        }
      }

      .shop_button {
        padding: 80px 0 0 30px;
        border-top: 1px solid #ebebeb;

        .intoshopcart {
          width: 145px;
          height: 50px;
          line-height: 48px;
          border: 1px solid #5c81e3;
          border-radius: 4px;
          font-size: 12px;
          color: #fff;
          background-color: #678ee7;
          background-image: linear-gradient(180deg, #678ee7, #5078df);
        }

        .nowshop {
          width: 145px;
          height: 50px;
          line-height: 48px;
          margin-left: 10px;
          border: 1px solid #e1e1e1;
          border-radius: 4px;
          font-size: 12px;
          color: #646464;
          background-color: #f9f9f9;
          background-image: linear-gradient(180deg, #fff, #f9f9f9);
        }
      }
    }
  }

  .info_details {
    margin-top: 20px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #dcdcdc;
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow: 0 3px 8px -6px rgba(0, 0, 0, 0.1);

    .details_nav {
      padding-left: 30px;
      height: 60px;
      padding: 0 10px 0 24px;
      border-bottom: 1px solid #d4d4d4;
      border-radius: 8px 8px 0 0;
      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.06);
      background: #f3f3f3;
      background: linear-gradient(#fbfbfb, #ececec);
      line-height: 60px;
      font-size: 18px;
      color: #333;

      h4 {
        font-size: 18px;
        font-weight: 400;
        color: #626262;
        display: inline-block;
      }
    }

    .img_details {
      width: 100%;
      height: auto;

      img {
        width: 100%;
      }
    }
  }
}
</style>
